<template>
    <div class="wrapper" ref="indexWrapper" style="-webkit-app-region: drag">
        <span class="logo"></span>
        <div class="title"></div>
        <div class="beginCenter">
            <div class="content">
                <h1>{{$t("settings.networkConfig")}}</h1>
                <p class="title">{{$t("settings.networkConfig")}}</p>
                <div class="net-list" style="-webkit-app-region: no-drag">
                    <div class="test">
                        <h2 class="net-title">{{$t("settings.testTitle")}}</h2>
                        <p class="net-icon">
                            <span><img src="./images/icon.png"></span>
                        </p>
                        <p class="net-content">{{$t("settings.testContent")}}</p>
                        <p class="btn" style="-webkit-app-region: no-drag">
                            <el-button @click.native="goToMain" type="primary" :loading="loadCompolete">{{$t("settings.joiningNet")}}</el-button>              
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="custom-header" style="-webkit-app-region: drag">
            <span @click="close" style="-webkit-app-region: no-drag"><i class="close"></i></span>
            <span @click="max" style="-webkit-app-region: no-drag"><i class="max" ref="max"></i></span>
            <span @click="min" style="-webkit-app-region: no-drag"><i class="min"></i></span>
        </div>
    </div>
</template>

<script>
import { ipcRenderer } from 'electron';
import { mapGetters, mapActions } from 'vuex';
import { getInitdata, checkUpdate } from '../../createAccount'
export default {
    name: 'landing-page',
    data() {
        return {
            loadCompolete: false,
            timer: null
        }
    },
    computed: {
        ...mapGetters(['isMaximized'])
    },
    mounted(){
        // 检查更新
        checkUpdate()
	},
    methods:{
        ...mapActions(['changeWindow']),
        goToMain(){
            this.loadCompolete = false
            getInitdata((resp)=>{
                console.log(resp)
                this.loadCompolete = true
                if(resp.code == 200){
                    // 网络连接成功
                    window.localStorage.setItem('startTime',resp.data.startTime)
                    this.$router.push('/o-wallet-list')
                }else{
                    // 网络连接失败
                    this.$message({
                        message: this.$t('settings.networkFiled'),
                        type: 'error'
                    })
                }
            })
        },
        min(){
            ipcRenderer.send('minimize-window');
        },
        close(){
            this.$confirm(this.$t("settings.closeTitle"), '', {
                distinguishCancelAndClose: true,
                confirmButtonText: this.$t("settings.closeConfirm"),
                cancelButtonText: this.$t("settings.closeCancle"),
                type: 'warning'
            }).then(() => {
                console.log('close')
                ipcRenderer.send('close-window');
            }).catch((action) => {
                if(action === 'cancel'){
                    console.log('hide')
                    this.timer = setTimeout(()=>{
                        ipcRenderer.send('hide-window');
                    },500)
                }else{
                    console.log('close dialog')
                }
            });
        },
        max(){
            if (this.isMaximized == 'true') {
                // 当前是放大状态-->点击要还原窗口
                console.log('当前是放大状态-->点击要还原窗口')
                this.$refs.max.style.background="url("+require('./images/maximize_white.svg')+") no-repeat center bottom"
                ipcRenderer.send('orignal-window');
                this.changeWindow('false')
            } else {
                // 默认是正常窗口-->点击放大窗口
                console.log('默认是正常窗口-->点击放大窗口')
                this.$refs.max.style.background="url("+require('./images/restore_white.svg')+") no-repeat center bottom"
                ipcRenderer.send('maximize-window');
                this.changeWindow('true')
            }
        }
    },
    beforeDestroy() {
        if(this.timer) {
            clearTimeout(this.timer);
        }
    }
}
</script>

<style lang="less" scoped>
.wrapper{
    position:relative;
    height: 100%;
    color:#fff;
    background:url(./images/bg.png) no-repeat center center;
    background-size: cover;
    overflow: hidden;
    .logo{
        position:absolute;
        top:13.2px;
        left:23.8px;
        width:119px;
        height:25px;
        background: url("./images/logo.png") no-repeat center center;
        z-index: 9;
    }
    .beginCenter{
        width:100%;
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        display: flex;
        justify-content: center;
        z-index: 9;
        .content{
            width:80%;
            h1{
                top:-50px;
                position: absolute;
                color: #FFFFFF;
                opacity: 0.1;
                font-size: 44px;
                letter-spacing: 1.38px;
            }
            .title{
                font-size: 24px;
            }
            .net-list{
                margin-top:30px;
                display:flex;
                .test{
                    position:relative;
                    padding:30px 0 40px;
                    margin-right:24px;
                    width:500px;
                    height:400px;
                    font-size:12px;
                    margin:0 auto;
                    cursor:pointer;
                    background: rgba(0,3,49,0.5);
                    border-radius: 4px;
                    .net-title{
                        height:28px;
                        line-height:28px;
                        font-size: 20px;
                        color: #FFFFFF;
                        text-align: center;
                        font-weight: normal;
                    }
                    .net-icon{
                        margin:24px 25px 9px;
                        height:150px;
                        text-align: center;
                        border-bottom:solid 1px rgba(255,255,255,0.15);
                        >span{
                            display: inline-block;
                            width:116px;
                            height:116px;
                            border-radius: 116px;
                            background:rgba(0,0,0,0.3);
                            img{
                                width:46px;
                                height:46px;
                                margin-top:35px;
                                margin-left:35px;
                            }
                        }
                    }
                    .net-content{
                        padding:0 19px;
                        height: 49px;
                        font-size: 14px;
                        color: #FFFFFF;
                        letter-spacing: 0.54px;
                        text-align: center;
                    }
                    .btn{
                        position:absolute;
                        bottom:40px;
                        width:100%;
                        text-align: center;
                        .el-button{
                            text-align: center;
                            color:#fff;
                            font-size:14px;
                            border:none;
                            letter-spacing: 0.44px;
                            width:110px;
                            height:32px;
                            line-height:32px;
                            background:#32C5DD;
                            border-radius:4px;
                            &:not(.disabled):hover{
                                background: #32C5DD;
                            }
                            &.disabled,&.is-disabled{
                                opacity: 0.5;
                                &:hover{
                                    background: #32C5DD;
                                    cursor:not-allowed;
                                }
                            }
                        }
                    }
                    // .btn-db{
                    //     bottom:2px;
                    // }
                    // .en-btn{
                    //     .el-button{
                    //         min-width: 190px;
                    //     }
                    // }
                    // .cn-btn{
                    //     .el-button{
                    //         min-width: 150px;
                    //     }
                    // }
                    .coming{
                        position:absolute;
                        bottom:15px;
                        width:100%;
                        text-align: center;
                        font-size:10px;
                    }
                } 
            }
        }
    }
    .custom-header{
        position:absolute;
        top:0;
        right:0;
        z-index:999;
        padding-right:5px;
        height:50px;
        span{
            float:right;
            margin-top:15px;
            margin-right:15px;
            font-size:10px;
            color:#fff;
            cursor:pointer;
            .min{
                display: inline-block;
                width: 10px;
                height: 8px;
                background: url("./images/minimize_white.svg") no-repeat center center
                }
            .max{
                display: inline-block;
                width: 10px;
                height: 10px;
                background: url("./images/maximize_white.svg") no-repeat center bottom
            }
            .close{
                display: inline-block;
                width: 10px;
                height: 10px;
                background: url("./images/close_white.svg") no-repeat center bottom
            }
        }
    }
}
</style>
